<template>
<div style="display: flex;justify-content: center;">
    <div style="background-color: white;width: 1300px;position: absolute;">

        <div style="margin: 10px 0" >
            <el-carousel :interval="4000" type="card" height="400px" arrow="always">
                <el-carousel-item v-for="item in imgs" :key="item">
                    <img :src="item" style="width: 100%">
                </el-carousel-item>
            </el-carousel>
        </div>

        <div style="margin-left: 60px;">
            <!--<el-row :gutter="10">
                <el-col :span="6" v-for="item in files" :key="item.id">
                    <img :src="item.url" alt="" style="width: 100%"/>
                </el-col>
                <el-col :span="6"></el-col>
                <el-col :span="6"></el-col>
                <el-col :span="6"></el-col>
            </el-row>-->

            <el-row >
                <el-col :span="5" v-for="(item, index) in files" :key="item.id" :offset="index > 0 ? 1 : 0">
                    <el-card :body-style="{ padding: '0px' }">
                        <img :src="item.url" class="image">
                        <div style="padding: 14px;">
                            <span>{{item.name}}</span>
                            <div class="bottom ">
                                <el-button type="text" class="button">操作按钮</el-button>
                            </div>
                        </div>
                    </el-card>
                </el-col>
            </el-row>

        </div>
    </div>
</div>
</template>

<script>
    export default {
        name: "Home",
        data(){
            return {
                imgs:[
                    'https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg',
                    'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
                    'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg',
                ],
                files:[],
                currentDate: new Date()
            }
        },
        created() {
            this.request.get("/files/front/all").then(res=>{
                this.files = res.data.filter(v => v.type ==='png'||v.type ==='jpg'||v.type ==='webp');
            });

        }
    }
</script>

<style scoped>

    .bottom {
        margin-top: 13px;
        line-height: 12px;
    }

    .button {
        padding: 10px;
        float: right;
    }

    .image {
        width: 100%;
        display: block;
    }


</style>